<template>
  <div class="company-style">
    <!-- 搜索、筛选栏 start -->
    <van-sticky class="search-sticky">
      <!-- 搜索 -->
      <van-search v-model="postData.keywords" shape="round" placeholder="请输入搜索关键词" @search="reloadData">
        <template #left>
          <span class="type" @click="onSearchType">{{f_searchTypeList[postData.searchType].name}}</span>
        </template>
      </van-search>

      <!-- 筛选 -->
      <van-dropdown-menu>
        <van-dropdown-item :title="t_area" ref="areaDropItem">
          <div class="area">
            <ul>
              <li :class="{'selected':si_area == index}" v-for="(item,index) in f_areaList" :key="index" @click="onAreaItem(item,index)">{{item.codeValue}}</li>
            </ul>
            <p>
              <van-button type="primary" round text="确定" @click="onAreaConfirm" />
            </p>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="filter">
          <div class="filter">
            <!-- 学历要求 -->
            <div class="box">
              <b>学历要求</b>
              <ul>
                <li :class="{'selected':si_edu.indexOf(index) != -1}" v-for="(item,index) in f_eduList" :key="index" @click="onEduItemClick(item,index)">{{item.codeValue}}</li>
              </ul>
            </div>

            <!-- 工作经验 -->
            <div class="box">
              <b>工作经验</b>
              <ul>
                <li :class="{'selected':si_workyears.indexOf(index) != -1}" v-for="(item,index) in f_workyearsList" :key="index" @click="onWorkyearsItemClick(item,index)">{{item.codeValue}}</li>
              </ul>
            </div>

            <!-- 性别要求 -->
            <div class="box">
              <b>性别要求</b>
              <ul>
                <li :class="{'selected':si_sex == index}" v-for="(item,index) in f_sex" :key="index" @click="onSexItem(item,index)">{{item.text}}</li>
              </ul>
            </div>

            <!-- 更新时间 -->
            <div class="box">
              <b>更新时间</b>
              <ul>
                <li :class="{'selected':si_updateDate == index}" v-for="(item,index) in f_updateDateList" :key="index" @click="onUpdateDateItem(item,index)">{{item.text}}</li>
              </ul>
            </div>

            <!-- 确认按钮 -->
            <div class="btn">
              <van-button type="primary" text="重置" @click="onReset" />
              <van-button type="primary" text="确定" @click="onFilterConfirm" />
            </div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item :title="t_sort" :options="f_sortList" v-model="postData.sort" @change="onSortChange" />
      </van-dropdown-menu>
    </van-sticky>
    <!-- 搜索、筛选栏 end -->

    <van-pull-refresh v-model="refreshLoading" @refresh="reloadData">
      <MyEmpty v-if="dataLoading === false && responseList.length === 0" />
      <van-list class="my-resume-list" v-model="dataLoading" :finished="finished" finished-text="没有更多了" @load="loadData" v-else>
        <div class="item" v-for="(item, index) in responseList" :key="index">
          <div class="show" @click="onResumeItem(item.personID)">
            <div class="person">
              <img :src="item.headImg" alt=""  />
              <p>
                <b>{{ item.personName }}</b>
                <span>{{ item.resumeUpdate }}</span>
              </p>
              <p>
                <span>{{ item.sex }}</span>
                <span>{{ item.specialtyValue }}</span>
                <span>{{ item.level_EduValue }}</span>
                <span>{{ item.work_yearsValue }}</span>
              </p>
            </div>
            <div class="expect" v-if="item.havJobWanted">
              <span>{{ item.salary_Wanted }}</span>
              <span>{{ item.positonValue }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <van-action-sheet v-model="searchTypeShow" :actions="f_searchTypeList" @select="onSearchTypeSelect" />

  </div>
</template>

<script>
import { Sticky, Search, Empty, Button, DropdownMenu, DropdownItem, Popup, Picker, ActionSheet, PullRefresh, List } from "vant";
import MyEmpty from "@/components/MyEmpty.vue";
import Global from '@/Global';
export default {
  name: "ResumeSearchIndex",
  components: {
    MyEmpty,
    [Sticky.name]: Sticky,
    [Search.name]: Search,
    [Empty.name]: Empty,
    [Button.name]: Button,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [ActionSheet.name]: ActionSheet,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
  },
  // 定义属性
  data() {
    return {
      postData: {
        searchType: 0,
        keywords: '',
        area: '',
        edu: '',
        workyears: '',
        sex: '',
        updateDate: 0,
        sort: 0,
        pageIndex: 0,
        pageSize: 30
      },
      //loading
      refreshLoading: true,
      dataLoading: false,
      finished: false,
      //isShow
      searchTypeShow: false,
      //filter ,{value:1,text:'意向'},{value:2,text:'经历'},{value:3,text:'专业'},{value:4,text:'地址'}
      f_searchTypeList: [{ value: 0, name: '全文' }, { value: 1, name: '意向' }, { value: 2, name: '学历' }, { value: 3, name: '经历' }, { value: 4, name: '专业' }, { value: 5, name: '地址' }],
      f_areaList: this.$bd.area,
      f_eduList: this.$bd.edu,
      f_workyearsList: this.$bd.workYears,
      f_sex: [{ value: '', text: '全部' }, { value: '男', text: '男' }, { value: '女', text: '女' }],
      f_updateDateList: [{ value: '', text: '全部' }, { value: 7, text: '最近一星期' }, { value: 15, text: '最近半个月' }, { value: 30, text: '最近一个月' }, { value: 60, text: '最近两个月' }, { value: 90, text: '最近三个月' }, { value: 180, text: '最近半年' },],
      f_sortList: [{ value: 0, text: '更新时间' }],
      //selIndex
      si_area: 0,
      si_edu: [0],//多选 存放数组下标
      si_workyears: [0],
      si_sex: 0,
      si_updateDate: 0,
      //selTitle
      t_area: '居住地',
      t_sort: '排序',
      //response
      responseList: []

    };
  },
  mounted() {
    //initData
    this.initData();
    this.loadData();
  },
  // 方法集合
  methods: {
    initData() {
      //add option to the filtet data
      if (this.f_areaList.find(it => it.code == '') == null)
        this.f_areaList.splice(0, 0, { code: '', codeValue: '全部' });
      if (this.f_eduList.find(it => it.code == '') == null)
        this.f_eduList.splice(0, 0, { code: '', codeValue: '全部' });
      if (this.f_workyearsList.find(it => it.code == '') == null)
        this.f_workyearsList.splice(0, 0, { code: '', codeValue: '全部' });
    },
    loadData() {
      this.postData.pageIndex++;
      this.dataLoading = true;
      this.$api.get('/CompanyResume/GetResumePageListInRCK', this.postData).then(res => {
        this.dataLoading = false;
        this.refreshLoading = false;
        //no data
        if (this.postData.pageIndex == 1 && res.response.length == 0) {
          //...
          this.finished = true;
        }
        else {
          var resultList = res.response.list;
          //no more data
          if (this.postData.pageIndex != 0 && res.response.length == 0) {
            this.finished = true;
          }
          this.responseList = [...this.responseList, ...resultList];
        }
      })
    },
    reloadData() {
      this.postData.pageIndex = 0;
      this.refreshLoading = true;
      this.finished = false;
      this.responseList = [];
      this.loadData();
    },
    onSearchType() {
      this.searchTypeShow = true;
    },
    onSearchTypeSelect(action) {
      this.postData.searchType = action.value;
      this.searchTypeShow = false;
    },
    onAreaItem(item, index) {
      this.si_area = index
      this.postData.area = item.code
      this.t_area = item.codeValue
    },
    onAreaConfirm() {
      this.reloadData();
      this.$refs.areaDropItem.toggle();
    },
    onEduItemClick(item, index) {
			//不是全部
      if (index != 0) {
				if(this.si_edu.indexOf(0) != -1)//包含全部
					this.si_edu.splice(0,1);//删除全部
        if (this.si_edu.indexOf(index) == -1)//未选择则添加
          this.si_edu.push(index);
				else{//已选择则删除
					this.si_edu.splice(this.si_edu.indexOf(index),1);
					if(this.si_edu.length ==0)//全部未选择则默认全部
						this.si_edu = [0];
				}
      }
      else {//全部
        this.si_edu = [0]
      }
			let arr=[];
			this.si_edu.forEach(index=>{
				arr.push(this.f_eduList[index].code);
			})
      this.postData.edu = arr.join(',')
    },
    onWorkyearsItemClick(item, index) {
      //不是全部
      if (index != 0) {
				if(this.si_workyears.indexOf(0) != -1)//包含全部
					this.si_workyears.splice(0,1);//删除全部
        if (this.si_workyears.indexOf(index) == -1)//未选择则添加
          this.si_workyears.push(index);
				else{//已选择则删除
					this.si_workyears.splice(this.si_workyears.indexOf(index),1);
					if(this.si_workyears.length ==0)//全部未选择则默认全部
						this.si_workyears = [0];
				}
      }
      else {//全部
        this.si_workyears = [0]
      }
			let arr=[];
			this.si_workyears.forEach(index=>{
				arr.push(this.f_workyearsList[index].code);
			})
      this.postData.workyears = arr.join(',')
    },
    onSexItem(item, index) {
      this.si_sex = index;
      this.postData.sex = item.value
			console.log(item);
    },
    onUpdateDateItem(item, index) {
      this.si_updateDate = index;
      this.postData.updateDate = item.value
    },
    onSortChange(value) {
      this.t_sort = this.f_sortList.find(it => it.value == value).text;
      this.postData.sort = value;
      this.reloadData();
    },
    onReset() {
      this.si_area = 0,
        this.si_edu = [],
        this.si_workyears = [0],
        this.si_sex = 0,
        this.si_updateDate = 0
    },
    onFilterConfirm() {
      this.$refs.filter.toggle();
      this.reloadData();
    },
    onResumeItem(personID) {
      this.$router.push({ name: 'company-resume-info', query: { personID: personID } })
    }
  },
};
</script>